<template>
<view class="cover--cover cover--devtools-font">
	<view style="margin-top: 100rpx; margin-bottom: 6px; height: 32px;" class="cover--header">
		<view class="cover--back_icon_container" @click="return_back()">
			<image class="cover--back_icon" src="../../static/icon/return.png"></image>
		</view>
	</view>
	<scroll-view style="height: calc(100vh - 182px)" scroll-y enhanced>
		<view class="cover--cover_content" style="scroll-snap-align: none;">
			<image class="cover--cover_img" :src="bookinfo.img"></image>
			<view class="cover--book_name">{{bookinfo.name}}</view>
			<view class="cover--book_author">{{bookinfo.author}}</view>
			<view class="cover--book_status">
				<view class="position: relative; top: -1px;">
					<view class="cover--book_status_item">
						<view class="cover--book_status_item_head" style="width: 103.66666666666667px;">
							<text class="cover--book_status_item_head_title">
								<text class="cover--number"style="margin-right: 2px; max-width: 103.66666666666667px;">
									29
								</text>
								<text style="max-width: 103.66666666666667px;">
									万字
								</text>
							</text>
						</view>
						<view class="cover--book_status_item_tail" style="width: 103.66666666666667px;">
							<text style="max-width: 103.66666666666667px;">共{{bookinfo.chapter}}章</text>
						</view>
					</view>
				</view>
				<view class="cover--book_status_item">
					<view class="cover--book_status_item_head" style="width: 103.66666666666667px;">
						<text class="cover--book_status_item_head_title">
							<text style="max-width: 103.66666666666667px;">
								已完结
							</text>
						</text>
					</view>
					<view class="cover--book_status_item_tail" style="width: 103.66666666666667px;">
						<text style="max-width: 103.66666666666667px;">状态</text>
					</view>
				</view>
				<view class="cover--book_status_item">
					<view class="cover--book_status_item_head" style="width: 103.66666666666667px;">
						<text class="cover--book_status_item_head_title">
							<text style="max-width: 103.66666666666667px;">{{bookinfo.sort}}</text>
						</text>
					</view>
					<view class="cover--book_status_item_tail" style="width: 103.66666666666667px;">
						<text style="max-width: 103.66666666666667px;">类型</text>
					</view>
				</view>
				<!-- <image class="cover--divider" src="../../static/icon/return.png"></image> -->
			</view>
			<view class="cover--book_desc">
				<view v-if="bookinfo.introduce" class="cover--book_desc_title cover--font-500">简介:{{bookinfo.introduce}}</view>
				<view class="cover--intro_wrapper">
					<view class="cover--intro_content cover--expand">{{bookinfo.name}}</view>
				</view>
			</view>
			<view style="height: 96px"></view>
		</view>
	</scroll-view>
	<view class="cover--bottom" style="height: 96px">
		
		<view class="cover--btn cover--normal_button" v-if="addtBtn==false" @click="AddClick">加入书架</view>
		<view class="cover--btn cover--normal_button" v-else>已加入书架</view>
		<view class="cover--btn cover--normal_button" @click="return_back()" style="margin-left: 100rpx;">
			<image src="../../static/icon/read.png" style="width: 40rpx;
    height: 40rpx;
    margin-right: 8rpx;"></image>
			开始阅读
		</view>
	</view>
</view>
</template>
<style>
	.cover--cover {
	    position: absolute;
	    top: 0;
	    left: 0;
	    height: 100vh;
	    width: 100vw;
	    background-color: #fff;
	    z-index: 10;
	    transition: transform 0.2s ease;
	}
	.cover--cover .cover--header {
	    display: flex;
	    align-items: center;
	    width: 100vw;
	}
	.cover--cover .cover--header .cover--back_icon_container {
	    position: relative;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    width: 32px;
	    height: 32px;
	    margin-left: 6px;
	}
	.cover--cover .cover--header .cover--back_icon_container .cover--back_icon {
	    width: 30rpx;
	    height: 30rpx;
		/* //margin-top: 20rpx; */
	}
	.cover--cover .cover--cover_content {
	    margin-top: 24px;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    width: 100vw;
	}
	.cover--cover .cover--cover_img {
	    width: 135px;
	    height: 180px;
	}
	.cover--cover .cover--cover_content .cover--book_name {
	    margin-top: 16px;
	    font-size: 20px;
	    font-family: HYXuanSong;
	    font-weight: 400;
	    color: #000000;
	    padding: 0 24px;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 2;
	    overflow: hidden;
	    text-align: center;
	}
	.cover--cover .cover--cover_content .cover--book_author {
	    margin-top: 8px;
	    font-size: 17px;
	    font-family: HYXuanSong;
	    font-weight: 400;
	    color: rgba(0,0,0,0.55);
	    padding: 0 24px;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 1;
	    overflow: hidden;
	}
	.cover--cover .cover--cover_content .cover--book_status {
	    width: calc(100vw - 48px);
	    margin-top: 32px;
	    padding: 0 24px;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    position: relative;
	}
	.cover--cover .cover--cover_content .cover--book_status .cover--book_status_item wx-view:first-child {
	    font-size: 16px;
	    font-family: HYXuanSong;
	    font-weight: 400;
	}
	.cover--cover .cover--cover_content .cover--book_status .cover--book_status_item wx-view {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    overflow: hidden;
	}
	.cover--cover .cover--cover_content .cover--book_status .cover--book_status_item_head wx-text {
	    color: rgba(0,0,0,0.9);
	    font-size: 17px;
	}
	
	.cover--cover .cover--cover_content .cover--book_status .cover--book_status_item_head .cover--book_status_item_head_title {
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 1;
	    overflow: hidden;
	}
	.cover--cover .cover--cover_content .cover--book_status .cover--book_status_item .cover--number {
	    font-family: HYXuanSong;
	    font-size: 20px;
	    line-height: 24px;
	}
	.cover--cover .cover--cover_content .cover--book_status .cover--book_status_item_head wx-text {
	    color: rgba(0,0,0,0.9);
	    font-size: 17px;
	}
	.cover--cover .cover--cover_content .cover--book_status .cover--book_status_item wx-view:last-child {
	    margin-top: 6px;
	    font-size: 14px;
	    font-family: PingFang SC;
	    font-weight: 400;
	    color: rgba(0,0,0,0.55);
	}
	.cover--cover .cover--cover_content .cover--book_status .cover--book_status_item wx-view {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    overflow: hidden;
	}
	.cover--cover .cover--cover_content .cover--book_status .cover--divider {
	    position: absolute;
	    bottom: -40px;
	    width: 240px;
	    height: 1px;
	    left: calc((100vw - 240px) / 2);
	}
	.cover--cover .cover--cover_content .cover--book_desc {
	    font-size: 15px;
	    font-family: PingFang SC;
	    width: calc(100vw - 48px);
	    margin: 0 24px;
	    margin-top: 81px;
	}
	.cover--cover .cover--cover_content .cover--book_desc .cover--book_desc_title {
	    color: #000000;
	    margin-bottom: 8px;
	}
	.cover--cover .cover--cover_content .cover--book_desc .cover--intro_wrapper {
	    display: flex;
	}
	.cover--cover .cover--cover_content .cover--book_desc .cover--intro_content.cover--expand {
	    max-height: 10000px;
	}
	user agent stylesheet
	.cover--cover .cover--cover_content .cover--book_desc .cover--intro_content {
	    line-height: 24px;
	    color: rgba(0,0,0,0.9);
	    word-break: break-all;
	    text-overflow: ellipsis;
	    line-height: 1.5;
	    max-height: 4.5em;
	    overflow: hidden;
	    font-weight: 400;
	    font-size: 15px;
	    text-align: justify;
	    line-break: anywhere;
	}
	bottom {
	    background-color: #fff;
	    position: absolute;
	    bottom: 0;
	    height: 96px;
	    display: flex;
	    flex-direction: row;
	    width: calc(100vw - 30px);
	    padding: 0 15px;
	    padding-top: 12px;
	    justify-content: space-between;
	}
	.cover--cover .cover--bottom .cover--btn {
	    position: relative;
	    overflow: hidden;
	    width: calc((100vw - 34px - 12px) / 2);
	    height: 38px;
	    border-radius: 7px;
	    display: flex;
	    font-size: 13px;
	    font-family: PingFang SC;
	    font-weight: 500;
	    color: #000000;
	    flex-direction: row;
	    align-items: center;
	    justify-content: center;
	    background-color: rgba(0,0,0,0.05);
	}
	.cover--cover .cover--bottom .cover--book_icon {
	    width: 20px;
	    height: 20px;
	    margin-right: 8px;
	}
	.cover--cover .cover--bottom {
	    background-color: #fff;
	    position: absolute;
	    bottom: 0;
	    height: 96px;
	    display: flex;
	    flex-direction: row;
	    width: calc(100vw - 30px);
	    padding: 0 15px;
	    padding-top: 12px;
	    justify-content: space-between;
	}
</style>
<script>
	import _tool from '@/util/tools.js';
	import _bookshelf from '@/util/bookshelf.js';
	export default {
		data(){
			return{
				bookinfo:Array,
				addtBtn: true,
			}
		},
		onLoad(options) {
		  //console.log(options); // 输出：{ id: '123', name: 'example' }
		  this.bookinfo = options;
		  
		  _tool.GetBookListID(this.bookinfo.name).then((res) => {
			  
		  	this.addtBtn = res;
		  });
		  // 使用参数进行后续操作...
		},
		methods:{
			return_back() {
				//console.log(111)
				uni.navigateBack({
				    delta: 1 // 返回上一页，如果需要返回多级页面，可以设置为更大的数字
				  });
			},
			AddClick(){
				// let bookData = {
				// 	id: this.bookinfo.id,					
				// 	page: 0,
				// 	index: 1,
				// 	name: this.bookinfo.name,
				// 	title: this.bookinfo.name,
				// 	img: this.bookinfo.img,
				// 	data: this.bookinfo.data
				// };
				// _tool.AddBookListData(bookData).then((res) => {
				// 	this.addtBtn = true;
				// });
				this.addtBtn = true;
			}
			
		}
	}
	
</script>